<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS技术</title>
		<link href="css/tyust.css" type="text/css" rel="stylesheet" />
		<!-- <style type="text/css">
			@import url("css/tyust.css");
		</style> -->
	</head>
	<body>
		<!-- 标签选择器 -->
		<h1>
			我是一个标题1
		</h1>
		<h1>
			我是一个标题2
		</h1>
		<hr>
		
		<!-- 类选择器: .className(类名自定义) -->
		<h1 class="main_h1">
			我是一个标题1
		</h1>
		<h1>
			我是一个标题2
		</h1>
		<hr>

		<!-- id选择器: #idName(id自定义，但必须唯一) -->
		<h1 id="id_h1">
			我是一个标题1
		</h1>
		<h1>
			我是一个标题2
		</h1>
		<hr>

		<!-- 后代选择器：在某个元素的所有包含元素 -->
		<h1>
			我是一个标题1
		</h1>
		<h1>
			我是一个标题2
		</h1>
		<p>
			你好，我是段落1
		</p>
		<ul>
			<li>
				<h1>
					我是li中的h1
				</h1>
			</li>
		</ul>
		<hr>

		<!-- 子选择器：在某个元素的所有下一层级的元素 -->
		<h1>
			我是一个标题1
		</h1>
		<h1>
			我是一个标题2
		</h1>
		<p>
			你好，我是段落1
		</p>
		<ul>
			<li>
				<h1>
					我是li中的h1
				</h1>
			</li>
		</ul>
		<hr>

		<h1>
			我是一个标题1
		</h1>
		<h1>
			我是一个标题2
		</h1>
		<p>
			你好，我是段落1
		</p>
		<ul>
			<li class="li_first">
				<h1>
					我是li中的h1
				</h1>
			</li>
			<li>
				<h1>
					我是li中的h2
				</h1>
			</li>
			<p>
				我是ul中的p1
			</p>
		</ul>
		<hr>

		<!-- 相邻兄弟选择器：在某个元素的同层级的【下一个】元素，即下一个相邻元素 -->
		<h1>
			我是一个标题1
		</h1>
		<h1>
			我是一个标题2
		</h1>
		<p>
			你好，我是段落1
		</p>
		<ul>
			<li class="li_first">
				<h1>
					我是li中的h1
				</h1>
			</li>
			<p>
				我是ul中的p2
			</p>
			<li>
				<h1>
					我是li中的h2
				</h1>
			</li>
			<p>
				我是ul中的p1
			</p>
			<li>
				<h1>
					我是li中的h3
				</h1>
			</li>
		</ul>
		<hr>

		<!-- 结构伪类选择器 -->
		<h3>我是标题1</h3>
		<h3>我是标题2</h3>
		<p class="p_first">我是段落1</p>
		<p>我是段落2</p>
		<h3 id="h3_third">我是标题3</h3>
		<p>我是段落3</p>
		<ul>我是ul
			<li>我是ul中的li1
				<p>我是ul中第一个li中的段落1</p>
			</li>
			<li>我是ul中的li2
				<p>我是ul中第二个li中的段落1</p>
				<p>我是ul中第二个li中的段落2</p>
				<h5>我是ul中第二个li中的标题1-干扰选择</h5>
				<h5>我是ul中第二个li中的标题2-干扰选择</h5>
				<p>我是ul中第二个li中的段落3</p>
			</li>
			<li>我是ul中的li3
				<p>我是ul中第三个li中的段落1</p>
				<p>我是ul中第一个li中的段落2</p>
				<p>我是ul中第一个li中的段落3</p>
			</li>
		</ul>
		<hr>

		<!-- 属性选择器 -->
		<a href="http://www.baidu.com" target="_blank" class="link first" id="first">1</a>
		<a href="https://牛逼class.com" target="_self" class="link define">2</a>
		<a href="css/abc.jpg" target="_self" class="link define">3</a>
		<a href="http://abcd.png" target="_self" class="link define">4</a>
		<a href="a.txt" target="_blank" class="link define">5</a>
		<a href="c.doc" target="_self" class="link last define" id="last">6</a>


	</body>
</html>
